<template>
  <el-drawer :visible.sync="visible" v-bind="drawerProps" :close-on-press-escape="true" @close="close" class="cl-drawer"
    ref="drawer">
    <template v-if="$slots.title" #title>
      <slot name="title" />
    </template>
    <div class="drawer-wrap">
      <div class="drawer-wrap_title"></div>
      <div class="drawer-wrap_content" :style="{
        height: hideFooter ? `100%` : '',
        backgroundColor: backColor
      }" :key="visible">
        <slot />
      </div>
      <div class="drawer-wrap_bottom" v-if="!hideFooter">
        <slot name="left-footer" />
        <cl-flex1 />
        <el-button size="small" @click="handleClose" v-if="showClose">
          {{ closeText }}
        </el-button>
        <el-button size="small" type="primary" :loading="saving" @click="confirm" v-if="showConfirm" :disabled="saving">
          {{ confirmText }}
        </el-button>
        <slot name="footer" />
      </div>
    </div>
    <!-- closeText="取消"
			confirmText="提交"
			showConfirm -->
  </el-drawer>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "cl-drawer",
  props: {
    // destroyed: {
    // 	type: Boolean,
    // 	default: true
    // },
    props: {
      type: Object,
      default: () => ({})
    },
    closeText: {
      type: String,
      default: "关闭"
    },
    confirmText: {
      type: String,
      default: "确定"
    },
    hideFooter: {
      type: Boolean,
      default: false
    },
    showClose: {
      type: Boolean,
      default: true
    },
    showConfirm: {
      type: Boolean,
      default: false
    },
    saving: {
      type: Boolean,
      default: false
    },
    backColor: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      visible: false
    };
  },
  computed: {
    ...mapGetters(["browser"]),
    drawerProps() {
      const { size, ...args } = this.props;
      const { isMobile } = this.browser;
      return {
        wrapperClosable: false,
        closeOnPressEscape: false,
        destroyOnClose: true,
        ...args,
        size: isMobile ? "100vw" : size || "50%",
        beforeClose: this.handleBeforeClose
      };
    }
  },
  watch: {
    visible(v) {
      if (!v) {
        this.$emit("close");
      }
    }
  },
  methods: {
    create(callback) {
      this.visible = true;
      this.$nextTick(() => {
        callback && typeof callback === "function" && callback();
      });
    },
    handleBeforeClose(done) {
      const { beforeClose } = this.props;
      console.log("done");
      this.$emit("before-close", done);
      if (this.saving) return;
      if (beforeClose) {
        beforeClose(done);
        return;
      }
      done();
    },
    handleClose() {
      this.handleBeforeClose(this.close);
    },
    close() {
      if (this.saving || !this.visible) return;
      this.visible = false;
    },
    confirm() {
      this.$emit("confirm");
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-drawer {
    background: #f9fafc;

    &__header {
      margin-bottom: 0;
      padding-bottom: 20px;
      color: #333;
      font-weight: bold;
      background: #fff;
      box-shadow: 0 4px 10px $shadow-main;
      font-size: 14px;
      z-index: 10;
    }
  }
}

.drawer-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;

  &_content {
    height: calc(100% - 61px);
    overflow-y: auto;
    padding: 20px;
    // border-top: 0.5px solid $border-main;
    box-sizing: border-box;
  }

  &_bottom {
    @include flex;
    align-items: center;
    height: 60px;
    border-top: 0.5px solid $border-main;
    padding: 0 20px;
    box-shadow: 0 -4px 10px $shadow-main;
    background: #fff;
  }
}
</style>
